import React, { useEffect, useRef, useState } from 'react'
import style from './yqtab.module.css'
import * as echarts from 'echarts';
import { creatList, createworks, hotData } from '../Creates'
import { Button } from 'antd'
function YQDataOne() {
    // 活跃周报图表
    const productionRef = useRef(null)
    const option = {
        title: {
            subtext: '制作数量',
            left: 'center',
            top: '85%'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '作品数量',
                type: 'pie',
                radius: '60%',
                data: [
                    { value: 2, name: '视频' },
                    { value: 2, name: '互动' },
                    { value: 1, name: '长页' },
                    { value: 2, name: '表单' },
                    { value: 3, name: '海报' },
                    { value: 2, name: 'H5' }
                ], labelLine: {
                    show: true,
                    length: 2, // 指示线的第一段长度  
                    length2: 0, // 如果不需要第二段长度，可以省略或设置为0  
                    lineStyle: {
                        width: 1, // 线的宽度  
                        color: '#000' // 线的颜色  
                    }
                },

                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(232, 0, 0, 0.5)'
                    }
                },

            }
        ]
    };
    useEffect(() => {
        var myChart = echarts.init(productionRef.current);
        myChart.setOption(option);
    }, [])
    // 数据分析图表
    const analysisRef = useRef(null)
    const analysisOption = {
        title: {
            text: '数据分析'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增总表单(份)', '新增被浏览(次)'],
            icon: 'circle',
            top: '92%'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '9%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['09-17', '09-18', '09-19', '09-20', '09-21', '09-22', '09-23']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '新增总表单(份)',
                type: 'line',
                stack: 'Total',
                data: [0.2, 0.5, 0.4, 0.9, 0.3, 1, 0.4]
            },
            {
                name: '新增被浏览(次)',
                type: 'line',
                stack: 'Total',
                data: [0.4, 0.5, 0.6, 1, 0.4, 0.5, 0.2]
            }
        ]
    };
    useEffect(() => {
        var myChart = echarts.init(analysisRef.current);
        myChart.setOption(analysisOption);
    }, [])

    // 显示隐藏
    const [isshowFlag, setIsshowFlag] = useState(false)
    const showTan = () => {
        setIsshowFlag(true)
        console.log('点击前：', isshowFlag)
    }
    const exitTan = () => {
        setIsshowFlag(false)
        console.log('点击后:', isshowFlag)
    }

    return (
        <div className={style.container}>
            <div className={style.action}>
                <div className={style.action_top}>
                    <h3>活跃周报 <span>9.16-9.22</span></h3>
                    <button onClick={showTan}>去制作</button>
                </div>
                {isshowFlag && (
                    <div className={style.tanlist}>
                        <div className={style.tan}>
                            <div className={style.Tan_top}>
                                <h3>创建作品</h3><p onClick={exitTan}>X</p>
                            </div>
                            <div className={style.Tan_center1}>
                                {
                                    creatList.map((item) => {
                                        return (
                                            <div className={style.Tan_Items} key={item.id}>
                                                <p><img src={item.img} alt="" /></p>
                                                <h4>{item.text}</h4>
                                                <h5>{item.disc}</h5>
                                            </div>
                                        );
                                    })
                                }

                            </div>
                            <div className={style.Tan_center}>
                                <h3>创意作品</h3>
                                <p>查看更多&gt;</p>
                            </div>

                            <div className={style.Tan_center2}>
                                {
                                    createworks.map(item => (
                                        <div className={style.Tan_Items} key={item.id}>
                                            <h4>{item.text}</h4>
                                            <h5>{item.disc}</h5>
                                        </div>
                                    ))
                                }
                            </div>
                            <h3 style={{ fontSize: '18px' }}>热门场景</h3>
                            <div className={style.Tan_center3}>
                                {
                                    hotData.map(item => (
                                        <div className={style.Tan_Items} key={item.id}>
                                            <h4 style={{ background: item.color }}>{item.text}</h4>
                                        </div>
                                    ))
                                }
                            </div>
                            <button className={style.btn}>创建作品</button>
                        </div>
                    </div>
                )}
                <div className={style.action_botm}>
                    <div className={style.map}>
                        <div>
                            <span>0</span>
                            <b className={style.b}>下载作品</b>
                            <h5>周对比0</h5>
                        </div>
                        <div>
                            <span>5</span>
                            <b className={style.b}>创建作品</b>
                            <h5>周对比<b style={{ color: 'blue' }}>+5</b></h5>
                        </div>
                        <div>
                            <span>0</span>
                            <b className={style.b}>积分获取</b>
                            <h5>周对比0</h5>
                        </div>
                    </div>
                    <div className={style.maps} ref={productionRef}></div>
                </div>
            </div>
            <div className={style.tablelist} ref={analysisRef}>

            </div>
        </div>

    )
}

export default YQDataOne
